<template>
    <div class="mt-3 mx-3">
        <div class="row h10">
            <div v-for="item in result" :key="item._id" class="col-4 mb-3">
                <div class="card h-100 shadow-sm ">
                    <div class="card-body text-center">
                        <img :src="item.avatar ? item.avatar.url : ''"
                            class="card-img-top rounded-circle border border-light w-25 my-3" :alt="item.title">
                        <h5 class="card-title">{{ item.title }}</h5>
                        <p class="card-text">{{ item.description }}</p>
                        <router-link :to="{
                            path: `/column/${item._id}`
                        }" class="btn btn-outline-primary">进入专栏</router-link>
                    </div>
                </div>
            </div>
        </div>
        <div class="button my-1" v-if="more">
            <button class="btn btn-outline-light" @click="callMore">加载更多</button>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, PropType, computed, watch } from 'vue'
interface DataProps {
    _id: number
    title: string
    avatar?: {
        _id?: string;
        url?: string;
        createdAt?: string;
    };
    description: string
}

export default defineComponent({
    name: 'Home',
    props: {
        list: {
            type: Array as PropType<DataProps[]>,
            required: true,
            default: []
        },
        more: {
            type: Boolean,
            required: true,
        },
        onMore: {
            type: Function
        }
    },
    setup(props) {
        const result = computed(() => {
            return props.list.map(item => {
                if (item.avatar === undefined) {
                    item.avatar = {}
                    item.avatar.url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Frichtext%2Flarge%2Fpublic%2Fp206989230.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653205899&t=5bb239c699006f00e18c58d07dd986de'
                }
                return item
            })
        }) || []
        const callMore = () => props.onMore && props.onMore()
        return {
            result, callMore
        }
    }
})
export { DataProps }
</script>
<style lang="less" scoped>
.button {
    width: 100%;
    display: flex;
    justify-content: center;

    button {
        background-color: #0d6efd;
    }
}
</style>